<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%;margin-top:10px;">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="90px"
      class="form-input-m"
      inline-message
    >

      <el-form-item label="实验室ID" prop="lsId">
        <el-input v-model="formData.lsId" placeholder="请输入实验室ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="安全项目ID" prop="lsiId">
        <el-input v-model="formData.lsiId" placeholder="请输入安全项目ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="分类" prop="lssiClass">
        <el-input v-model="formData.lssiClass" placeholder="请输入分类" clearable></el-input>
      </el-form-item>
      <el-form-item label="" prop="describes">
        <el-input v-model="formData.describes" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input v-model="formData.status" placeholder="请输入状态" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属科室" prop="deptCode">
        <el-input v-model="formData.deptCode" placeholder="请输入所属科室" clearable></el-input>
      </el-form-item>
      <el-form-item label="题目类型" prop="bankType">
        <el-select
          v-model="formData.bankType"
          placeholder="请选择类型"
          style="width: 200px"
          clearable>
          <el-option v-for="item in types" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select
          v-model="formData.startus"
          placeholder="请选择状态"
          style="width: 200px"
          clearable>
          <el-option
            v-for="item in states"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序号" prop="seq">
        <el-input-number v-model="formData.seq" :min="1" :max="1000" style="width: 200px" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="formData.remarks"
          placeholder="请输入备注"
          clearable
          type="textarea"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="">
        <el-button type="primary" @click="saveForm">保存</el-button>
      </el-form-item>
    </el-form>

    <!-- 配置扩展属性弹框 -->
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import {
  ref,
  reactive,
  watch,
  getCurrentInstance,
  PropType,
  onMounted
} from 'vue';
import { IsEmpty, clearFormData, formatDateTime } from '@/utils/common'; //导入工具函数
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import EditExtraProperties from '@/components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import { AppStore } from '@/stores/store';
import {  FormInstance } from 'element-plus';
import { addQuestionBank, editQuestionBank } from '@/api/askn_questionnaire_api';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();
const formRef = ref<FormInstance>; //表单ref标记
// 表单绑定的数据类型限制
interface FormDataVO {
  id: string /*主键*/;
    lsId: String ;/*实验室ID*/
    lsiId: String ;/*安全项目ID*/
    lssiClass: String ;/*分类*/
    describes: String ;/**/
    status: String ;/*状态*/
    deptCode: String ;/*所属科室*/
  }
// 表单绑定的数据
let formData = reactive<FormDataVO>({
  id: '',
    lsId:'', /*实验室ID*/
    lsiId:'', /*安全项目ID*/
    lssiClass:'', /*分类*/
    describes:'', /**/
    status:'', /*状态*/
    deptCode:'', /*所属科室*/
  });
let types = reactive([]);
// 表单校验规则
const formRules: any = {
  lsId:[{ required: true, message: '请输入实验室ID' }],
  lsiId:[{ required: true, message: '请输入安全项目ID' }],
  lssiClass:[{ required: true, message: '请输入分类' }],
  describes:[{ required: true, message: '请输入' }],
  status:[{ required: true, message: '请输入状态' }],
  deptCode:[{ required: true, message: '请输入所属科室' }],
  bankType: [{ required: true, message: '请选择类型', trigger: 'blur' }]
};

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref

defineExpose({
  addNew,
  saveForm
});

// 父组件传值
let props = defineProps({
//  infoDicts: { type: Array as PropType<any>, required: true },
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
  },
  {
    deep: true,
    immediate: true
  }
);

//watch(
//  () => props.infoDicts,
//  (nval, oval) => {
//    types=nval;
//  },
//  {
//    deep: true,
//    immediate: true
//  }
//);


onMounted(() => {
  //formData.bankNumber=generateCode();
});


// 方法定义区 =============
//生成题库编码
function generateCode() {
  let now = new Date();
  console.log(now,"now");
  let y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate(),
    h = now.getHours(),
    mm = now.getMinutes(),
    s = now.getSeconds(),
    ms = now.getMilliseconds();
  return "TM"+y + m+d+h+mm+s+ms;
}
function addNew(callback: any) {
  clear();
  if (callback) {
    callback({ a: '初始化完成' });
  }
}
// 清空表单
function clear() {
  formData.startus = 1;
  //formData.bankNumber = generateCode();
  formData.seq = 1;
  formData.lsId = '';//实验室ID
  formData.lsiId = '';//安全项目ID
  formData.lssiClass = '';//分类
  formData.describes = '';//
  formData.status = '';//状态
  formData.deptCode = '';//所属科室
}

// 保存信息
function saveForm() {
  submitForm();
}

// 保存
const submitForm = () => {
  let elInfo = proxy.$refs.formRef;
  elInfo.validate(async (valid: any) => {
    if (!valid) {
      return false;
    }
    let res: any;
    if (IsEmpty(formData.id)) {
      res = await addLsafeSafetyItem(formData);
    } else {
      res = await editLsafeSafetyItem(formData);
    }
    res.status.code === 1 ? VxeMessage(res.status.msg, VxeNotifyType.success) : VxeMessage(res.status.msg, VxeNotifyType.error);
    clear();
    proxy.$emit('findList');
  });
};
// 打开配置扩展属性弹框
function openEditExtraProperties() {
  EditExtraPropertiesRef.value?.toggleDialog();
}

function changeTypes(event: any) {
  const type: any = types.find((item: any) => item.id == event);
  formData.bankType = type.code;
}

function changeStates(event: any) {
  formData.startus = event;
}
const states = [
  {
    value: 1,
    label: '启用'
  },
  {
    value: 0,
    label: '停用'
  }
];
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}
</style>

